<template>
	<el-card class="add-library">
		<h2>新增库文件</h2>
		<el-form :model="newFileForm" ref="newFileFormRef" label-width="120px" class="new-file-form">
			<!-- 文件选择区域 -->
			<el-form-item label="上传文件">
				<el-upload class="upload-demo" action="" :http-request="dummyRequest" @change="handleFileChange"
					:limit="5" :auto-upload="false" multiple accept=".pdf,.docx,.txt">
					<el-button>选择文件</el-button>
					<div slot="tip" class="el-upload__tip">
						支持 .txt（优先）、.pdf 和 .docx 格式
					</div>
				</el-upload>
			</el-form-item>

			<!-- 列出已选择的文件 -->
			<div v-if="newFileForm.files && newFileForm.files.length" class="selected-files">
				<h4>已选择文件：</h4>
				<ul>
					<li v-for="(file, index) in newFileForm.files" :key="index">{{ file.name }}</li>
				</ul>
			</div>

			<!-- 上传进度条（显示平均进度） -->
			<el-progress v-if="uploadProgress > 0 && uploadProgress < 100" :percentage="uploadProgress"
				status="active"></el-progress>

			<el-form-item>
				<el-button type="primary" @click="submitFile">上传</el-button>
				<el-button @click="cancel">取消</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import axios from 'axios'

	export default {
		name: 'AddLibraryFile',
		setup() {
			// 表单模型，只保存文件和原始文件名称（额外字段可按需添加）
			// 在 setup 内声明
			const newFileForm = reactive({
				files: [], // 存储 File 对象数组
				originalNames: [] // 存储每个文件的原始名称
			})

			const newFileFormRef = ref(null)

			// 上传进度（整体进度取平均值）
			const uploadProgress = ref(0)

			// 占位请求，阻止 el-upload 默认上传
			const dummyRequest = (options) => {
				options.onSuccess('dummy', options.file)
			}

			// 文件选择处理，@change 事件的第二个参数 fileList 为选中的文件列表
			const handleFileChange = (file, fileList) => {
				// 保存文件的原始对象（注意兼容性：有的情况下用 f.raw）
				newFileForm.files = fileList.map(f => f.raw || f)
				// 保存原始文件名称
				newFileForm.originalNames = newFileForm.files.map(f => f.name)
				console.log("已选择文件：", newFileForm.files)
				console.log("原始文件名：", newFileForm.originalNames)
			}

			// 上传文件接口请求
			const submitFile = () => {
				if (!newFileForm.files || newFileForm.files.length === 0) {
					ElMessage.error('请选择要上传的文件')
					return
				}

				uni.showLoading({
					title: '库文件上传中',
					mask: true
				})

				const formData = new FormData()
				newFileForm.files.forEach(file => {
					formData.append('files', file)
				})
				// 传递原始文件名，后端可以解析这个 JSON 数组字段
				formData.append('originalNames', JSON.stringify(newFileForm.originalNames))

				// 采用 axios 上传或继续使用 uni.uploadFile 方式（注意 H5 下使用 uni.uploadFile 属性可能与小程序不同）
				axios.post('http://120.26.38.251/cat/v1/fileMgr/uploadBaseFile', formData, {
						headers: {
							'Content-Type': 'multipart/form-data'
						},
						onUploadProgress: progressEvent => {
							const percent = Math.round((progressEvent.loaded * 100) / progressEvent.total)
							console.log("上传进度：", percent + "%")
							// 更新进度变量
							uploadProgress.value = percent
						}
					})
					.then((res) => {
						uni.hideLoading()
						if (res.data.code !== '200') {
							ElMessage.error(res.data.message || '库文件上传失败')
							return
						}
						ElMessage.success('新增库文件成功')
					})
					.catch((err) => {
						uni.hideLoading()
						ElMessage.error('库文件上传失败')
						console.error('uploadBaseFile error:', err)
					})
			}

			const cancel = () => {
				uni.navigateBack()
			}

			return {
				newFileForm,
				newFileFormRef,
				dummyRequest,
				handleFileChange,
				submitFile,
				cancel,
				uploadProgress
			}
		}
	}
</script>

<style scoped>
	.add-library {
		max-width: 600px;
		margin: 20px auto;
		padding: 20px;
	}

	.new-file-form {
		margin-top: 10px;
	}

	.selected-files {
		margin: 10px 0;
	}

	.selected-files ul {
		list-style: none;
		padding: 0;
	}

	.selected-files li {
		padding: 3px 0;
		font-size: 14px;
		color: #333;
	}
</style>